<template>
  <el-row class="mb-4">
    <el-button type="primary" @click=" transcribe() ">录制</el-button>
    <el-button type="warning" @click=" pause() ">暂停</el-button>
    <el-button type="success" @click=" play() ">播放</el-button>
  </el-row>
  <el-dialog v-model=" dialogVisible " title="回放">
    <div id="playback"></div>
  </el-dialog>
  <div class="wrapper">
    <el-form ref="ruleFormRef" :model=" ruleForm " :rules=" rules " label-width="120px" class="demo-ruleForm"
      :size=" formSize " status-icon>
      <el-form-item label="Activity name" prop="name">
        <el-input v-model=" ruleForm.name " />
      </el-form-item>
      <el-form-item label="Activity zone" prop="region">
        <el-select v-model=" ruleForm.region " placeholder="Activity zone">
          <el-option label="Zone one" value="shanghai" />
          <el-option label="Zone two" value="beijing" />
        </el-select>
      </el-form-item>
      <el-form-item label="Activity count" prop="count">
        <el-select-v2 v-model=" ruleForm.count " placeholder="Activity count" :options=" options " />
      </el-form-item>
      <el-form-item label="Activity time" required>
        <el-col :span=" 11 ">
          <el-form-item prop="date1">
            <el-date-picker v-model=" ruleForm.date1 " type="date" label="Pick a date" placeholder="Pick a date"
              style="width: 100%" />
          </el-form-item>
        </el-col>
        <el-col class="text-center" :span=" 2 ">
          <span class="text-gray-500">-</span>
        </el-col>
        <el-col :span=" 11 ">
          <el-form-item prop="date2">
            <el-time-picker v-model=" ruleForm.date2 " label="Pick a time" placeholder="Pick a time"
              style="width: 100%" />
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="Instant delivery" prop="delivery">
        <el-switch v-model=" ruleForm.delivery " />
      </el-form-item>
      <el-form-item label="Activity type" prop="type">
        <el-checkbox-group v-model=" ruleForm.type ">
          <el-checkbox label="Online activities" name="type" />
          <el-checkbox label="Promotion activities" name="type" />
          <el-checkbox label="Offline activities" name="type" />
          <el-checkbox label="Simple brand exposure" name="type" />
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="Resources" prop="resource">
        <el-radio-group v-model=" ruleForm.resource ">
          <el-radio label="Sponsorship" />
          <el-radio label="Venue" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="Activity form" prop="desc">
        <el-input v-model=" ruleForm.desc " type="textarea" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click=" submitForm( ruleFormRef ) ">
          Create
        </el-button>
        <el-button @click=" resetForm( ruleFormRef ) ">Reset</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { nextTick, reactive, ref } from "vue";
import { record } from "rrweb";
import rrwebPlayer from "rrweb-player";
import "rrweb-player/dist/style.css";
const formSize = ref( "default" );
const dialogVisible = ref( false );
const ruleFormRef = ref();
const playback = ref();
const ruleForm = reactive( {
  name: "Hello",
  region: "",
  count: "",
  date1: "",
  date2: "",
  delivery: false,
  type: [],
  resource: "",
  desc: "",
} );

const rules = reactive( {
  name: [
    { required: true, message: "Please input Activity name", trigger: "blur" },
    { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
  ],
  region: [
    {
      required: true,
      message: "Please select Activity zone",
      trigger: "change",
    },
  ],
  count: [
    {
      required: true,
      message: "Please select Activity count",
      trigger: "change",
    },
  ],
  date1: [
    {
      type: "date",
      required: true,
      message: "Please pick a date",
      trigger: "change",
    },
  ],
  date2: [
    {
      type: "date",
      required: true,
      message: "Please pick a time",
      trigger: "change",
    },
  ],
  type: [
    {
      type: "array",
      required: true,
      message: "Please select at least one activity type",
      trigger: "change",
    },
  ],
  resource: [
    {
      required: true,
      message: "Please select activity resource",
      trigger: "change",
    },
  ],
  desc: [
    { required: true, message: "Please input activity form", trigger: "blur" },
  ],
} );

const submitForm = async ( formEl ) => {
  if ( !formEl ) return;
  await formEl.validate( ( valid, fields ) => {
    if ( valid ) {
      console.log( "submit!" );
    } else {
      console.log( "error submit!", fields );
    }
  } );
};

const resetForm = ( formEl ) => {
  if ( !formEl ) return;
  formEl.resetFields();
};

const options = Array.from( { length: 10000 } ).map( ( _, idx ) => ( {
  value: `${ idx + 1 }`,
  label: `${ idx + 1 }`,
} ) );

const events = [];

let instanceRecord;

const transcribe = () => {
  ElMessage( {
    message: "开启视频录制",
    type: "success",
  } );
  instanceRecord = record( {
    emit ( event ) {
      console.log( event );
      events.push( event );
    },
  } );
};

const pause = () => {
  ElMessage( {
    message: "暂停视频录制",
    type: "success",
  } );

  instanceRecord && instanceRecord();
};

const play = () => {
  pause();
  dialogVisible.value = true;
  nextTick( () => {
    let replayer = new rrwebPlayer( {
      target: document.getElementById( "playback" ),
      // 配置项
      props: {
        events,
      },
    } );
    replayer.addEventListener( "finish", () => {
      console.log( "finish" );
    } );
  } );
};
</script>
<style>
.wrapper {
  width: 400px;
  margin: 40px auto;
}

#playback {
  height: 656px;
}
</style>
